<script lang="ts" setup>
    import ModalDialogFrom from '@/components/modal-dialog-from.vue';
    import type {  SessionList } from "@/api/auth/types";
    import historyTalk from '@/api/historyTalk';
    import { TOKEN_KEY} from "@/enums/CacheEnum";

    const props = defineProps({
        conversationList: {
            type: Array as PropType<SessionList[]>,
            required: true,
        },
        SessinoCode: {
            type:String ,
            required: true,
        },
        disabledvalue:{
            type:Boolean,
            required: true,
        }
    })
    const emits = defineEmits(["activeIndex",'updateSession']);
    const Token = <string>localStorage.getItem(TOKEN_KEY);
    const fromData = ref({})
    //用户会话code的值 切换时要更新到存储 
    const Code = ref('')
    // 通过父组件传过来的页面是否输出有内容 等AI回复结束后 才可继续删除
    const history = ref(false)
    // 默认选中的历史会话的索引
	const activeIndex = ref(0);
    // 是否显示删除模态框
	const dialogVisible = ref(false);
	const diclogText = ref('您确定要删除该会话吗? ');
    //选中某一个历史会话
    function selectSession(index: number,item:any,event:any){
        if (history.value) {
            return 
        }
        activeIndex.value = index;
        emits('activeIndex',item.session_id,item.session_code)
    }  
    // 删除时 调用模态框
    function onClickDeaete(index: number,item:any,event:any){
        if (history.value) {
            return
        }
        if (props.conversationList.length==1) {
            ElMessage.error('至少保留一条历史会话记录')
            return
        }
        fromData.value = item;
        dialogVisible.value = true;
    }
    // 删除模态框确定事件
    function deaeteDetermine(data:any){
        dialogVisible.value = data;
        historyTalk.getDelsete(Token,fromData.value).then(res => {
            if (res.data) {
                emits('updateSession',activeIndex.value,true)
            }
        })
     
    }
    watch(()=>props.SessinoCode,(newValue:any,oldValue:any)=>{        
        Code.value = newValue;
    },{immediate:true,deep:true})

    // 监听传过来的数组 
    watch(()=>props.conversationList,(newValue:any,oldValue:any)=>{
        // console.log('workOrder变化了',newValue,oldValue,Code.value)
        if (newValue.length>0) {
            newValue.forEach((item:any,index:number) => {
                if (item.session_code==Code.value) {
                    activeIndex.value = index;
                }
            });
        }
    },{immediate:true,deep:true})
    watch(()=>props.disabledvalue,(newValue:any,oldValue:any)=>{
        history.value = newValue
    },{immediate:true,deep:true})
</script>

<!-- 切换AI客服左边列表 -->
<template>
    <div class="h-full w-48">
        <section class="h-full w-48 session-list">
            <div class="session-item overflow-x-hidden h-full">
                <div class="infinite-list-wrapper h-full mr-1 text-center">
                    <div
                        class="session flex  items-start flex-col p-4 seeactive "
                        v-for="(item,index) in props.conversationList"
                        :key="index"
                        @click="selectSession(index,item,$event)"
                        :class="{ 'session-item-active': activeIndex == index,'disabled':props.disabledvalue}"
                        >
                        <div class="w-full h-5 text-left mb-1 overflow-hidden title dot flex items-center">
                            <img src="/src/assets/images/message_circle_32.png" class="w-6 h-6 mr-1" />
                            <span class="text-xs font-normal overflow-hidden w-full">
                                {{item.session_code}}
                            </span>
                        </div>
                        <div class="text-xs w-full h-4 font-normal time flex  items-center justify-between">
                            <span class="title-time">{{item.create_time}}</span>
                            <div class="text-lg btn-box" @click.stop="onClickDeaete(index,item,$event)">
                                <Delete style="width: 1em; height: 1em; margin-right: 8px" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <ModalDialogFrom v-model:dialogVisible="dialogVisible" :diclogText="diclogText"  @determine="deaeteDetermine" />
    </div>
</template>

<style scoped>
.session-list{
    background-color:var(--el-bg-color-overlay);
    /* border-right: 1px solid #EEEEEE;#252829  */
    border-right: 1px solid var(--v-ai-rate-border-color);
}
.title{
    color: var(--v-txt_icon_black_2, #1a2029);
}
.title-time{
    color: var(--v-txt_icon_grey_6, #b0b7c0);
}
.session-item {
    scrollbar-width: none;
}
.dot{
    text-overflow: ellipsis;
    white-space: nowrap
}
.time{
    color:#B0B7C0;
}
.session-item-active{
    position: relative;
    cursor: pointer;
    background-color:var(--v-session-hover-bg-color);
}
.session-item-active .title{
    color: #3e6ffb;
}
.disabled{
    color: #999;
    cursor: not-allowed !important;
    border-left-width: 0;
    background-color: initial;
}
.title span{
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.session-item-active:before,.session:hover:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: #3e6ffb;
    top: 0;
    left: 0;
}
/*     color: var(--txt_icon_black_1, #1a2029); */
.session:hover{
    position: relative;
    cursor: pointer;
    background-color:var(--v-session-hover-bg-color);
}
.session:hover .title{
    color: #3e6ffb !important;
}
.btn-box:hover{
    color: #d81e06;
}
</style>